import QtQuick 2.0

Rectangle {
    width: 360; height: 240
    color: "#eeeeee"
    id: rootItem

    Text {
        id: centerText
        text: "A Signle Text."
        anchors.centerIn: parent
        font.pixelSize: 24
        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onReleased: {
                centerText.state = "redText";
            }
        }

        states:[
            State {
            name: "redText"
            changes: [
                PropertyChanges {
                    target: centerText
                    color: "red"
                    },
                PropertyChanges {
                    target: centerText
                    font.bold: true; font.italic: true
                }
                ]
            },
            State{
                name: "blueText"
                when: mouseArea.pressed
                /* 'changes' is default property */
                PropertyChanges{
                    target: centerText; color:"blue"
                    font.bold: true; font.pixelSize: 32
                }
            }
        ]

        state: "redText"
    }

    Timer{
        id: timer
        interval: 1000
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            centerText.state = "blueText"
            inTimer.start();
        }
    }
    Timer{
        id: inTimer
        interval: 150
        running: false
        repeat: false
        onTriggered: {
            centerText.state = "redText";
        }
    }

    Component.onCompleted: {
        timer.start();
    }
}

